<script setup>
import { useRouter } from 'vue-router'
import { inject } from 'vue'

const router = useRouter()
const userRole = inject('userRole')

function canAccess(page) {
  if (userRole === 'admin') return true
  if (userRole === 'manager') return page !== 'user'
  if (userRole === 'user') return ['home', 'analysis', 'monitor'].includes(page)
  return false
}

function navigateTo(path) {
  router.push(path)
}
</script>

<template>
  <div class="sidebar">
    <div class="nav-items">
      <div v-if="canAccess('home')" @click="navigateTo('/')">智能健身衣首页</div>
      <div v-if="canAccess('smartwear')" @click="navigateTo('/smartwear')">智能健身衣</div>
      <div v-if="canAccess('admin')" @click="navigateTo('/admin')">管理中心</div>
      <div v-if="canAccess('user')" @click="navigateTo('/user')">用户管理</div>
      <div v-if="canAccess('device')" @click="navigateTo('/device')">设备管理</div>
      <div v-if="canAccess('settings')" @click="navigateTo('/settings')">系统设置</div>
      <div v-if="canAccess('analysis')" @click="navigateTo('/analysis')">数据分析</div>
      <div v-if="canAccess('dealersales')" @click="navigateTo('/dealersales')">经销商销售额</div>
      <div v-if="canAccess('monitor')" @click="navigateTo('/monitor')">系统监控</div>
      <div class="logout" @click="navigateTo('/login')">退出登录</div>
    </div>
  </div>
</template>

<style scoped>
.sidebar {
  width: 220px;
  height: 100vh;
  background: #2c3e50;
  color: white;
  padding: 20px 0;
}

.nav-items div {
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.3s;
}

.nav-items div:hover {
  background: #34495e;
}

.logout {
  margin-top: 20px;
  color: #e74c3c;
  border-top: 1px solid #34495e;
  padding-top: 20px;
}
</style>